<template>
    <div id="sort">
        <v-top>
            <h3>商品搜索</h3>
        </v-top>


        <!-- 搜索栏 -->
        <nav class="nav">
            <div class="nav-search">
                <i class="iconfont icon-sousuo"></i>
                <input type="search" placeholder="按内容搜索" v-model="keywords">
            </div>
            <div class="nav-sort">
                <ul>
                    <li class="fontSize">
                        <a href="#">综合推荐</a>
                    </li>
                    <li>
                        <a href="#">销量</a>
                    </li>
                    <li>
                        <a href="#">
                            价格<i class="iconfont icon-shangxiajiantouheise font28"></i>
                        </a>
                    </li>
                    <li>
                        <a href="#">好评度</a>
                    </li>
                    <li>
                        <a href="#">店铺</a>
                    </li>
                </ul>
                <div class="sortBtn">
                    <i class=" iconfont icon-shaixuan"></i>
                    <a href="#">筛选</a>
                </div>
            </div>
        </nav>
        <article class="content">
            <ul class="commodity" ref="haveData">
                <v-not v-if=" searchList.length == 0"></v-not>
                <li v-for="item in searchList" :key="item.id">
                    <!-- goodsname: "小米10"
                        id: 1
                        img: "/uploads/d6a0eff0-70be-11ea-91a2-9395060d7390.jpg"
                        market_price: 3999
                        price: 3999 -->
                    <div class="commodityLeft">
                        <img :src="item.img" alt="">
                    </div>
                    <div class="introduce">
                        <h4 class="font32">{{item.goodsname}}</h4>
                        <p class="font28 comIntroduce">敏感肌可用，控油祛痘、男女可用...</p>
                        <div class="commodityBot">
                            <p class="money">
                                <b class="font20">￥</b>
                                <span>{{item.market_price}}</span>
                                <del class="font20">￥{{item.price}}</del>
                                <span class="font20 pay">999人已付款</span>
                            </p>
                            <span class="font20 bgFF8066">11.11限时299元起</span>
                            <p class="font20">999条评论 99.9%好评</p>
                        </div>
                    </div>
                </li>
                <!-- <li>
                    <div class="commodityLeft">
                        <img src="../assets/img/02.png" alt="">
                    </div>
                    <div class="introduce">
                        <h4 class="font32">水肌美男士清爽控油洗面奶 100g</h4>
                        <p class="font28 comIntroduce">净透毛孔，温和不紧绷，清爽控油</p>
                        <div class="commodityBot">
                            <p class="money">
                                <b class="font20">￥</b>
                                <span>999</span>
                                <del class="font20">￥1099</del>
                                <span class="font20 pay">999人已付款</span>
                            </p>
                            <span class="font20 bgFF8066">11.11限时299元起</span>
                            <p class="font20">999条评论 99.9%好评</p>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="commodityLeft">
                        <img src="../assets/img/02.png" alt="">
                    </div>
                    <div class="introduce">
                        <h4 class="font32">水肌美净肤洁面膏 100g/支 深...</h4>
                        <p class="font28 comIntroduce">深层清洁肌肤，温和又滋润，日本...</p>
                        <div class="commodityBot">
                            <p class="money">
                                <b class="font20">￥</b>
                                <span>199</span>
                                <del class="font20">￥499</del>
                                <span class="font20 pay">999人已付款</span>
                            </p>
                            <span class="font20 bgFF8066">11.11限时299元起</span>
                            <p class="font20">999条评论 99.9%好评</p>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="commodityLeft">
                        <img src="../assets/img/02.png" alt="">
                    </div>
                    <div class="introduce">
                        <h4 class="font32">多芬男士+护理净油洁面泡沫2...</h4>
                        <p class="font28 comIntroduce">击退油光，净在掌握，有效控油...</p>
                        <div class="commodityBot">
                            <p class="money">
                                <b class="font20">￥</b>
                                <span>299</span>
                                <del class="font20">￥599</del>
                                <span class="font20 pay">999人已付款</span>
                            </p>
                            <span class="font20 bgFF8066">11.11限时299元起</span>
                            <p class="font20">999条评论 99.9%好评</p>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="commodityLeft">
                        <img src="../assets/img/02.png" alt="">
                    </div>
                    <div class="introduce">
                        <h4 class="font32">贝德玛温和卸妆水 粉水、蓝水...</h4>
                        <p class="font28 comIntroduce">懒人必备的四效合一卸妆水，舒缓...</p>
                        <div class="commodityBot">
                            <p class="money">
                                <b class="font20">￥</b>
                                <span>999</span>
                                <del class="font20">￥1099</del>
                                <span class="font20 pay">999人已付款</span>
                            </p>
                            <span class="font20 bgFF8066">11.11限时299元起</span>
                            <p class="font20">999条评论 99.9%好评</p>
                        </div>
                    </div>
                </li> -->
            </ul>
        </article>
    </div>
</template>

<script>
import {search} from '../utils/api'
import vNot from '../components/vNot.vue'
export default {
    data() {
        return {
            keywords:'',
            searchList:[],
        };
    },
    watch:{
        keywords(newVal,oldVal){
            search(newVal).then(res=>{
                if(newVal == ''){//如果新值为空那么把数组变空
                    this.searchList = [];
                    return;
                }
                if(res.code == 200){
                    if(res.list == null){
                        this.searchList = [];
                    }else{
                        this.searchList = res.list
                    }
                }
            }).catch(err=>{
                console.log(err);
            })
        },
        // searchList:{
        //     deep:true,
        //     handler(val){
        //         if(val.length == 0){
        //             console.log('aaa');
        //         }
        //     }
        // }
    },
    components:{
        vNot,
    },
    mounted(){

    }
};
</script>

<style scoped src="../assets/css/commodityList.css">
/* @import '../assets/css/commodityList.css'; */
</style>
